<template>
  <moyu-row :left-span="showDetail?18:24" :right-span="6">
    <template #leftField>
      <!-- 左边卡片 -->
      <list-card ref="listCard" @row-click="showDetailHandler" :get-list="getDatabaseListPage">
        <template #header>
          <el-button @click="showDetailHandler({})" size="small" type="primary">新增</el-button>
        </template>
      </list-card>
    </template>
    <template v-if="showDetail" #rightField>
      <!-- 右边卡片 -->
      <detail-card v-model:card-detail="selectRow" @form-change="formChangeHandler">
        <template #header>
          <el-button @click="cancelShowDetailHandler" size="small">取消</el-button>
        </template>
      </detail-card>
    </template>
  </moyu-row>
</template>

<script setup>
import {ref} from 'vue'
import ListCard from "@/views/kettle/database/card/ListCard.vue";
import DetailCard from "@/views/kettle/database/card/DetailCard.vue";
import {getDatabaseListPage} from "@/api/kettle/database";
import MoyuRow from "@/components/MoyuRow/MoyuRow.vue";
import MoyuCard from "@/components/MoyuCard/MoyuCard.vue";
// 是否展示数据源细节
const showDetail = ref(false)


// 选中的行
let selectRow = ref({})

/**
 * 获取选中的行
 * @param row
 */
const showDetailHandler = function (row) {
  selectRow.value = row
  showDetail.value=true
}

/**
 * 取消展示
 */
const cancelShowDetailHandler = function () {
  selectRow= ref({})
  showDetail.value = false
}

/**
 * listCard
 * @type {Ref<any>}
 */
const listCard = ref()
/**
 * 更新listCard
 * @param queryParams
 */
const formChangeHandler = function (queryParams){
  listCard.value.getListPage()
}


</script>

<style scoped>

</style>